<template>
	<view class="details">
		<!-- 商品图 -->
		<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
			<swiper-item>
				<view class="swiper-item">
					<image class="swiper-img" :src="goodsContent.imgUrl"></image>
				</view>
			</swiper-item>

		</swiper>

		<!-- 价格和名称 -->
		<view class="details-goods">
			<view class='goods-pprice'>￥{{goodsContent.pprice}}</view>
			<view class='goods-oprice'>￥{{goodsContent.oprice}}</view>
			<view class='goods-name'>{{goodsContent.name}}</view>
		</view>

		<!-- 商品详情图 -->
		<view>
			<view v-for="(item,index) in swiperList" :key="index">

				<image class="details-img" :src="item.imgUrl"></image>
			</view>
	
		</view>



<!-- 		<Card cardTitle="看了又看"></Card>
		<CommodityList :dataList="dataList"></CommodityList> -->

		<!-- 底部 -->
		<view class="details-foot">
			<view class='iconfont icon-xiaoxizhongxin'></view>
			<view class='iconfont icon-gouwuche' @tap="goShopCart"></view>
			<view class='add-shopcart' @tap="showPop">加入购物车</view>
			<view class="purchase" @tap="showPop">立即购买</view>
		</view>

		<!-- 底部弹出框 -->
		<view class="pop" v-show="isShow" @touchmove.stop.prevent='' >
			<!-- 蒙层 -->
			<view class="pop-mask" @tap='hidePop'></view>
			<view class="pop-box" :animation="animationData">
				<view>
					<image class="pop-img" :src="goodsContent.imgUrl"></image>
				</view>
			
			<view class="pop-num">
				<view>购买数量</view>
				<uni-number-box  @change="changeNumber" :min="1" :value="num"></uni-number-box>
			</view>
			<view class="pop-sub" @tap="addCart">
				确定
			</view>
			</view>
		</view>

	</view>
	
</template>

<script>
	import Card from '@/components/common/Card.vue'
	import CommodityList from '@/components/common/CommodityList.vue'
	import {mapMutations} from 'vuex'
	export default {
		data() {
			return {
				num:1,
				animationData: {},
				goodsContent: {},
				isShow: false,
				swiperList:[
					
				],
				dataList: []
			}
		},
		components: {
			Card,
			CommodityList
		},
		//修改返回默认行为（不支持微信小程序）
		onBackPress() {
		
			if (this.isShow) {
				this.hidePop();
				return true
			
			}
		},
		
 
		//app分享
		onNavigationBarButtonTap(e) {
		if(e.type==='share'){
			uni.share({
				provider:'weixin',
				type:0,
				scene:'WXSceneSession',
				title:this.goodsContent.name,
				href:"http://192.168.0.221:8080/#/pages/details/details?id="+this.goodsContent.id+"",
				imageUrl:'',
				success:function(res){
					uni.showTabBar({
						title:"分享成功"
					})
				},
				fail:function(res){
					uni.showTabBar({
						title:"分享失败"
					})
				}
			})
		}
		},
		onLoad(e) {
			//接收商品id
			this.getData(e.id)
		},
		methods: {
		
			
			//根据id获取商品
			async getData(id) {
			let  shopid=	uni.getStorage("shopId")
				if(id==shopid){
				let res=uni.getStorage("shopdetaildata")
			this.saveshopdetail(res)
				}else{
							uni.setStorage("shopId",id)
				let res = await this.$Request({
					url: '/api/goods/id',
					data: {
						id
					}
				})
	
				uni.setStorage("shopdetaildata",JSON.stringify(res))
			this.saveshopdetail(res)
				}
		
	

			},
			saveshopdetail(res){
				this.goodsContent = res.data.data[0]
				this.swiperList=[]
				this.swiperList=JSON.parse(res.data.data[0].swiperList) 
			},
			showPop() {
				var animation = uni.createAnimation({
					// 动画持续时间
					duration: 200,
					  timingFunction: "ease",
				})
				animation.translateY(2000).step();
				this.animationData = animation.export();

				this.isShow = true
				setTimeout(() => {
					animation.translateY(0).step();
					this.animationData = animation.export()
				}, 200)
			},
			hidePop() {
				this.isShow = false
			},
			//改变商品数量
			changeNumber(value){
				this.num=value
			},
			//前往购物侧
			goShopCart(){
				//前往tarbar必须用这个
				uni.navigateTo
				({
					url:'../shopcart/shopcart'
				})
			},
			//加入购物车
			async addCart(){
				let goods=this.goodsContent;//当前商品对象
				let goods_id=goods.id;
				let num=this.num;
				
				
				try{
					let res=await	this.$Request({
					url:"/api/addCart",
					method:"POST",
					data:{
						goods_id,num
					},
					header:{
						token:true
						
					}
				})
	
				//隐藏弹出框
				this.hidePop()
				//提示信息
				uni.showToast({
					title:"成功加入购物车",
					icon:'none'
					
				})
				}catch(e){
					//TODO handle the exception
					uni.showToast({
						title:"请求失败",
						icon:'none'
					})
				}

				
				
				// this.goodsContent['checked']=false;
				// this.goodsContent['num']=this.num;
				
				// this.addShopCart(goods)
			
			},
			...mapMutations(['addShopCart'])
		}
	}
</script>

<style scoped>
	.text{
		text-align: center;
		margin: 20rpx 0 20rpx 0;
	}
	h2{
		color: #83a246;
	}
	.details {
		padding-bottom: 90rpx;
	}

	swiper {
		width: 100%;
		height: 700rpx;

	}

	.swiper-img {
		width: 100%;
		height: 700rpx;
	}

	.details-goods {
		text-align: center;
		font-weight: bold;
		font-size: 36rpx;
		padding: 10rpx 0;
	}

	.goods-oprice {
		text-decoration: line-through;
	}

	.details-img {
		width: 100%;
	}

	.details-foot {
		display: flex;
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		height: 90rpx;
		align-items: center;
		justify-content: center;
		background-color: #FFFFFF;
	}

	.details-foot .iconfont {
		width: 60rpx;
		height: 60rpx;
		border-radius: 50%;
		background-color: #000000;
		color: #FFFFFF;
		text-align: center;
		line-height: 60rpx;
		margin: 0 10rpx;
	}

	.add-shopcart {
		margin-left: 48rpx;
			padding: 6rpx 14rpx;
		background-color: #000000;
		color: #FFFFFF;
		border-radius: 40rpx;
	
	}

	.purchase {
		margin: 0 40rpx;
		padding: 6rpx 28rpx;
		background-color: #49BDFB;
		color: #FFFFFF;
		border-radius: 40rpx;
	}

	.pop {
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		z-index: 999;
	}

	.pop-mask {
		position: absolute;
		left:0;
		top:0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.3);

	}

	.pop-box {
		position: absolute;
		left: 0;
		bottom: 0;
		width: 100%;
	/* 	height: 400px; */
		background-color: #FFFFFF;

	}

.pop-img{
margin-top: -20rpx;
	width: 260rpx;
	height: 260rpx;
}
.pop-num{
	padding:20rpx;
	display: flex;
	justify-content: space-between;
}
.pop-sub{
	line-height: 80rpx;
	background-color: #49BDFB;
	color:#FFFFFF;
	text-align: center;
	}
</style>
